"use client";
import styles from "./page.module.css";
import Mybutton from "./components/mybutton";
import Add from "./components/add";
import ConfirmDialog from "./components/confirmDialog";
import React from "react";
import a from "./utils/code";
import { useState, useRef } from "react";
import { DataItem } from "./utils/item";
export default function Home() {
  const b = "{}里面只能放表达式，有值的就能放";

  let indexTemp = 0;
  //初始化数据
  const [data, setData] = useState([
    { id: 1, title: "我", count: "10", time: "2022-01-01" },
    { id: 2, title: "你们", count: "20", time: "2022-01-01" },
    { id: 3, title: "他们", count: "30", time: "2022-01-01" },
  ]);

  /**
   * useRef 是一个可变的ref对象，它可以保存一个可变的value，可以用来保存dom节点，也可以用来保存函数。
   * 这里的ref是用来获取dom节点的，用来触发点击事件。
   * useRef 创建的ref对象，在组件的生命周期内保持不变，所以可以安全地在函数组件中使用。而自己创建的对象在每次渲染的时候都会重新创建
   */
  const ref = useRef<HTMLButtonElement>(null);

  /**
   * 这里可以添加更多的逻辑，比如更新状态或调用API等0
   */
  const handleClick = () => {
    console.log("事件调用的方法");
    alert(ref.current + "ref获取dom节点");
    if (ref.current) {
      ref.current.style.backgroundColor = "red";
    }
  };

  /**
   * 计数器使用usestate钩子函数去实时更新数据
   * 第一个参数是值，第二个参数是更新函数 setstatue函数是异步的。
   */
  const [count, setCount] = useState(0);
  const [isShow, setIsShow] = useState(false);
  const [user, setUser] = useState({ name: "张三", age: 20 });
  const handleAdd = () => {
    //箭头函数有效避免了异步导致的数据错乱的问题，prevCount是上一次的count值，而不会是23都用的1，而是2用1,3用2
    setCount((prevCount) => prevCount + 1);
  };

  const handlesub = () => {
    //这种写法会因为异步导致cout用的值依然是之前的初始值或者上一个值，23用的都是1的情况
    setCount(count - 1);
    //展开语法 合并对象
    setUser({ ...user, age: user.age + 1 });
  };

  const [submittedData, setSubmittedData] = useState<DataItem>({
    id: 0,
    title: "",
    count: "",
    time: "",
  });

  const handleSumCalculated = (mdata: DataItem) => {
    console.log("接收到的数据为：", mdata);
    setData([...data, mdata]);
  };

  //确认按钮
  const handleConfirm = () => {
    setIsShow(false);
    setData([...data.slice(0, indexTemp), ...data.slice(indexTemp + 1)]);
  };

  //取消按钮
  const handleCancel = () => {
    console.log("取消");
    setIsShow(false);
  };

  //展示确认框
  const showDialogHandle = (index: number) => {
    indexTemp = index;
    setIsShow(true);
  };

  /**
   * 把数据提出来 让tsx中只有笑傲你是结构
   * 普通写法
   * <Mybutton title="我们" count={1} onClick={handleClick} />
   * 简写法 解构展开语法  key最好不要用index，list顺序变了的话还会触发刷新每个元素，应该用数据中的id或其他唯一标识，这个后台会发过来的实际使用的时候
   */
  let itemData = data.map((item, index) => (
    //onclick需要的是一个函数，而不是函数的调用结果，加上括号就是调用结果了
    <Mybutton key={item.id} {...item} onClick={() => showDialogHandle(index)} />
  ));

  return (
    <div className={styles.page}>
      <main className={styles.main}>
        <div className={styles.ctas}>
          {isShow ? (
            <ConfirmDialog confirm={handleConfirm} cancel={handleCancel} />
          ) : null}
          <Add onSumCalculated={handleSumCalculated} />
          {itemData.length === 0 ? <div>暂无数据</div> : itemData}
          <div
            style={{ display: "flex", flexDirection: "column", gap: "16px" }}
          >
            <span style={{ color: "blue", textAlign: "center" }}>
              {count}--{user.name + user.age}
            </span>
            <div style={{ display: "flex", gap: "16px" }}>
              <button style={{ flex: "1", height: "40px" }} onClick={handleAdd}>
                ++
              </button>
              <button style={{ flex: "1", height: "40px" }} onClick={handlesub}>
                --
              </button>
            </div>
          </div>
          <div style={{ color: "red" }}>里面只能放表达式，有值的就能放</div>
          <button onClick={handleClick} ref={ref}>
            按钮
          </button>
          <span>{a}</span>
        </div>
      </main>
    </div>
  );
}
